<!--
元素显示特性（模式）
    元素（标签）以什么方式显示。例如div独占一行，span一行可以放多个。
    不同标签根据各自特点用在不同地方，其中的【元素显示模式/特性】会影响布局排版。

    分类：
        1、块元素
        例如：div、p、h2、ul、li等
            1）独占一行；
            2）可控制宽、高、内边距、外边距；（设置后，仍旧占用一行）
            3）宽度默认是容器（父级宽度）的100%；（宽度随容器，高度随内容）
            4）是一个容器盒子，里面可以放行内元素、块级元素。

        特殊情况：文字块级元素p、h1不要放块级元素，因为生成DOM树节点时会有问题。
            <p><div></div></p>   会多生成一个p标签，且不是嵌套关系

        2、行内元素（内联元素）
        例如：span、a、strong、del等
            1）一行可显示多个，即相邻行内元素在一行上；
            2）直接设置宽、高是无效的；
            3）内容自身宽度就是默认宽度；（宽度随内容，高度也随内容）
            4）只容纳文本、或其它行内元素。

        特殊情况：
            a标签不要再放a标签；
            a比较特殊，是行内元素，却可以放块级元素，但最好将a转为块级元素后再放。

        3、行内块元素
        例如：img、td、input等
        官方性别只认男性、女性，但在泰国还认人妖；
        同理，各种资料中只认行内元素、块元素2大类，但实际上还有存在着行内块元素这一特殊类型；
        它既有块元素特点，也有行内元素特点。
            1）行内元素特点：一行可以显示多个，多个相邻行内块元素在一行上显示。
            2）行内元素特点：内容自身宽度就是默认宽度。（默认宽度随内容，但也可以控制它）
            3）块元素特点：可以控制宽度、高度、行高、内边距、外边距。（高度可控制）
        
        注意：视频中说一行显示多个时，彼此间存在空白间隙也是特点，但它不是，
             那是因为换行的原因，换行符就是空白间隙。
-->

<style>
    body {
        margin: 0;
        padding: 0;
    }
    div {
        /* 并没有占用全部的容器宽度，但仍占用一行 */
        width: 100px;
        height: 100px;
        /* 设置背景色，方便观察宽、高是否受影响 */
        background-color: cyan;
    }
    span {
        /* 无效的宽、高，只随内容而改变 */
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    input {
        /* 宽度不仅可以随内容，还也可以控制它 */
        width: 500px;
    }
</style>

<!-- 注意紧贴在一行上，毕竟换行会影响观察结果 -->
<!-- 块元素 -->
<div>hello</div><div>hellohello</div>

<!-- 行内元素 -->
<span>hello</span><span>hellohello</span>

<!-- 行内块元素 -->
<input type="text"><input type="text">